<template>
  <div>
     <Card>
      <span>推荐</span>
     </Card>
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div class="scroll-item" v-for="(item, index) in icons" :key="index" @click='goDetail(item.id)'>
          <!-- <h2><img v-lazy="item.img" alt=""></h2>  -->
          <div class="h2"> <img class="img" v-lazy=(item.img) alt=""></div>
          <div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import Card from './Card.vue'
export default {
    data() {
        return {
            icons: [
                {
                    id: 68,
                    img: "images/icons9.1.jpg",
                    name: "星期日历型"
                },
                {
                    id: 69,
                    img: "images/icons1.1.jpg",
                    name: "空中霸王型"
                },
                {
                    id: 70,
                    img: "images/icons2.1.jpg",
                    name: "格林尼治型 II"
                },
                {
                    id: 71,
                    img: "images/icons3.1.jpg",
                    name: "游艇名仕型"
                },
                {
                    id: 72,
                    img: "images/icons4.1.jpg",
                    name: "日志型"
                },
                {
                    id: 73,
                    img: "images/icons5.1.jpg",
                    name: "探险家型"
                },
                {
                    id: 74,
                    img: "images/icons7.1.jpg",
                    name: "蚝式恒动型"
                },
                 {
                    id: 75,
                    img: "images/icons8.1.jpg",
                    name: "宇宙计型迪通拿"
                },
            ]
        };
    },
    mounted() {
        this.init();
        // console.log(this.icons);
    },
    beforeDestroy() {
        this.bs.destroy();
    },
    methods: {
      	goDetail( id ){
			this.$router.push({
				path:'/detail',
				query:{
					id
				}
			})
		},
        init() {
            this.bs = new BetterScroll(this.$refs.scroll, {
                scrollX: true,
                probeType: 3 // listening scroll event
            });
        }
    },
    components: { Card }
}
</script>

<style lang="scss" scoped>
.scroll-wrapper {
  position: relative;
  width: 100%;
  height: 260px;
  // margin :80px auto;
  white-space: nowrap;
  // border: 3px solid #42b983;
  border-radius: 5px;
  overflow: hidden
}

.scroll-content {
  display: inline-block
}

.scroll-item {
 
  border-radius: 10px;
 
  height: 240px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  span{
    font-size: small;
  }
}

.h2 {
  width: 160px;
  height: 200px;
  overflow: hidden;

  .img {
    width: 150px;
    height: 200px;
    border-radius: 8px; 
    transition: all 0.5s;
  }

  .img:hover {
    transform: scale(2,2);
  }
}
</style>
